<template>
  <el-button @click="toAddSpu" :disabled="addBtnDisabled" :icon="Plus" type="primary">添加 SPU</el-button>
  <el-table :data="spuList" border style="width: 100%">
    <el-table-column v-slot="{ $index }" label="序号" width="100">
      {{ $index + 1 }}
    </el-table-column>
    <el-table-column prop="spuName" label="SPU名称"></el-table-column>
    <el-table-column prop="description" label="SPU描述"></el-table-column>
    <el-table-column v-slot="{ row }" label="操作" width="240">
      <el-button @click="handleAdd(row)" title="添加SKU" type="primary" :icon="Plus" size="small"></el-button>
      <el-button @click="handleEdit(row)" title="编辑SPU" type="primary" :icon="Edit" size="small"></el-button>
      <el-button @click="handleLook(row)" title="查看SKU列表" type="info" :icon="InfoFilled" size="small"></el-button>
      <el-popconfirm @confirm="handleDelete(row)" :title="`确定要删除 ${row.spuName} 吗？`">
        <template #reference>
          <el-button title="删除SPU" type="danger" :icon="Delete" size="small"></el-button>
        </template>
      </el-popconfirm>
    </el-table-column>
  </el-table>
  <el-pagination v-model:current-page="page" v-model:page-size="limit" :page-sizes="[3, 5, 10, 20, 50]"
    layout="prev, pager, next, jumper, ->, sizes, total, " :total="total" style="margin-top: 15px"
    @size-change="handleSizeChange" @current-change="handleCurrentChange">
  </el-pagination>

  <!-- 查看 skuList -->
  <el-dialog v-model="skuListVisible" :title="currentSpu?.spuName + ' 的 SKU 列表'">
    <el-table :data="skuList">
      <el-table-column property="skuName" label="名称" width="180" />
      <el-table-column property="price" label="价格(元)" width="100" />
      <el-table-column property="weight" label="重量(KG)" width="100" />
      <el-table-column v-slot="{ row }" label="默认图片" width="160">
        <img :src="row.skuDefaultImg" style="width: 100px" />
      </el-table-column>
    </el-table>
  </el-dialog>

</template>
<script lang="ts">
import { onMounted, ref, reactive, watch } from 'vue'
import { Plus, Edit, InfoFilled, Delete } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import type { spuListModel, spuItemModel, } from '@/api/product/model/spu'
import type { skuInfoModel } from '@/api/product/model/sku'
import { useCategoryStore } from '@/stores/category'
import { reqDeleteSpuInfo, reqGetSpuList } from '@/api/product/spu'
import { reqGetSkuListBySpuId } from '@/api/product/sku'
export default {
  name: 'SpuList',
}
</script>

<script lang="ts" setup>
const page = ref(1)
const limit = ref(3)
const total = ref(100)

const spuList = ref<spuListModel>([])

// category的store对象
const categoryStore = useCategoryStore()

// 获取 spu 列表
const getSpuList = async () => {
  const res = await reqGetSpuList(page.value, limit.value, categoryStore.cate3Id as number)
  spuList.value = res.records
  total.value = res.total
}
// 添加 SKU
const handleAdd = async (row: spuItemModel) => {
  const { cate1Id, cate2Id, cate3Id } = categoryStore
  emit('changeSpu', row)
  emit('changeTab', 3)
}
// 编辑
const handleEdit = (row: spuItemModel) => {
  emit('changeSpu', row)
  emit('changeTab', 2)
}
// 查看sku列表
const skuListVisible = ref(false)
const skuList = ref<skuInfoModel[]>([])
const currentSpu = ref<spuItemModel>()
const handleLook = async (row: spuItemModel) => {
  currentSpu.value = row
  skuList.value = await reqGetSkuListBySpuId(row.id as number)
  skuListVisible.value = true
}
// 删除 SPU
const handleDelete = async (row: spuItemModel) => {
  await reqDeleteSpuInfo(row.id as number)

  ElMessage.success('删除 SPU 成功！')
  // 重新获取 SPU
  getSpuList()
}

// 表格每页显示条数改变
const handleSizeChange = (val: number) => {
  limit.value = val
  getSpuList()
}
// 表格当前页码改变
const handleCurrentChange = (val: number) => {
  page.value = val
  getSpuList()
}
// 三级菜单变化时，重新获取数据
const addBtnDisabled = ref(true)
watch(() => categoryStore.cate3Id, (cate3Id) => {
  // 三级菜单不存在时：清空列表数据、禁用添加SPU按钮
  if (!cate3Id) {
    spuList.value = []
    // 禁用添加SPU按钮
    addBtnDisabled.value = true
    return
  }
  // 取消禁用 添加SPU按钮
  addBtnDisabled.value = false
  // 重新获取数据
  getSpuList()
})
// 挂载完成后即获取 SPU 列表数据
onMounted(() => {
  getSpuList()
})

// 切换 Tab 到添加spu Tab，需要初始化表单数据
const emit = defineEmits(['changeTab', 'changeSpu'])
const toAddSpu = () => {
  emit('changeSpu', {
    spuName: '',
    description: '',
    category3Id: 0,
    tmId: undefined, // 品牌id
    spuSaleAttrList: [], // 销售属性名列表
    spuImageList: [] // 图片列表
  })
  emit('changeTab', 2)
}

</script>

<style lang="scss" scoped>

</style>